<template>
    <el-card>
        <el-form :inline="true" ref="searchFormRef" :model="searchForm">
            <el-form-item :label="t('common.keyWork')" prop="title">
                <el-input v-model="searchForm.title" maxlength="256" :clearable="true"
                    :placeholder="t('formDemo.pleaseKeyword')"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="onSearch">{{
                    t('common.query')
                    }}</el-button>
                <el-button icon="RefreshRight" @click="onReset(searchFormRef)">{{
                    t('common.reset')
                    }}</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="identityUserData" :border="true" :stripe="true" class="table-data">
            <el-table-column type="index" :label="t('formDemo.user.serialNumber')" width="180" />
            <el-table-column label="提交时间">
                <template #default="scope">
                    {{ creationTime(scope.row.creationTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="提交人" />
            <el-table-column prop="title" label="流程名" />
            <el-table-column label="状态">
                <template #default="scope">
                    <AuditStatusComponent :status="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column :label="t('formDemo.user.operation')">
                <template #default="scope">
                    <el-button type="default" size="small" icon="View" title="详情"
                        @click="onDetail(scope.row.workflowId)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 15, 20, 50]"
            :background="true" layout="prev, pager, next, jumper, -> , sizes, total" :total="total"
            @current-change="getWorkListAsync" @size-change="onSizeChange" />
    </el-card>
    <Show :visible="showWorkflowDetail">
        <WorkflowDetailComponent v-model="showWorkflowDetail" :workflowId="workflowId" @onRefresh="onRefresh" />
    </Show>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import type { FormInstance } from 'element-plus';
import type { PagedResultDto } from '@/utils/api/type';
import { useI18n } from '@/hooks/web/useI18n';
import type { GetMyAuditPageListInput, GetMyAuditPageListOutput } from '@/utils/api/workflow/list/type';
import { getListAsync } from '@/utils/api/workflow/list';
import dayjs from 'dayjs';
import AuditStatusComponent from './audit-status';
import WorkflowDetailComponent from './workflow-details.vue';
import { Show } from '@/components/show/index';
const { t } = useI18n();

const props = defineProps({
    auditedMark: {
        type: Boolean,
        required: true
    }
});

// 查询条件参数
const defaultPageSize = 10;
const searchFormRef = ref<FormInstance>();
const searchForm = ref<GetMyAuditPageListInput>({
    title: '',
    auditedMark: props.auditedMark,
    skipCount: 0,
    maxResultCount: defaultPageSize
});
// 列表数据
let identityUserData = ref<GetMyAuditPageListOutput[]>([]);
// 分页器默认页码
let pageNo = ref<number>(1);
// 每一页展示几条数据
let pageSize = ref<number>(defaultPageSize);
// 存储已有总个数
let total = ref<number>(0);

const showWorkflowDetail = ref(false);
const workflowId = ref('');

// 时间格式化
const creationTime = computed(() => (value: string) => {
    return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
});

//详情
const onDetail = (id: string) => {
    showWorkflowDetail.value = true;
    workflowId.value = id;
};

// 刷新
const onRefresh = async () => {
    await getWorkListAsync();
};

//分页器下拉菜单发生变化触发
const onSizeChange = async (pageSizes: number) => {
    pageSize.value = pageSizes;
    await getWorkListAsync();
};

// 组件挂载完成
onMounted(async () => {
    await getWorkListAsync();
});

// 查询
const onSearch = async () => {
    await getWorkListAsync();
};

// 重置
const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) {
        return;
    }
    formEl.resetFields();
};

// 查询列表
const getWorkListAsync = async (pager = 1) => {
    pageNo.value = pager;
    searchForm.value.maxResultCount = pageSize.value;
    searchForm.value.skipCount = (pageNo.value - 1) * pageSize.value;
    let result: PagedResultDto<GetMyAuditPageListOutput> = await getListAsync(searchForm.value);
    total.value = result.totalCount;
    identityUserData.value = result.items;
};
</script>
<style scoped lang="scss">
.table-data {
    width: 100%;
    margin: 20px 0;
}
</style>